<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <span>A</span>
    </div>
    <button>按钮</button>
</body>
<script src="../jquery-3.4.1.js"></script>
<script>
    //方法一：
    // $('.box').on("click",function(){
    //     console.log("click--1");
    // })
    // $('button').on("click",function(){
    //     console.log("按钮1");
        
    // })
    //方法二：
    // $('.box').click(function(){
    //     console.log("click--2");
    // })
    // $('button').click(function(){
    //     console.log("按钮2");
        
    // })
    //方法三：
    // $('button').one("click",function(){
    //     console.log("按钮一次");
        
    // })
    ////注销事件
    // $('.box').click(function(){
    //     console.log("click--1");
    // })
    // $('.box').click(function(){
    //     console.log("click--2");
    // })
    // $('.box').click(function(){
    //     console.log("click--3");
    // })
    // $('.box').mouseenter(function(){
    //     console.log("mouseenter--3");
    // })
    // $('button').click(function(){
    //     console.log("注销了");
    //     $('.box').off("click");
    // })

    //jq事件委托
    $('.box')
</script>
</html>